<template>
    <div
        :id="config.ele"
        style="width:100%; height: 100%;">
    </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import * as echarts from 'echarts/core';
import { TooltipComponent } from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
const props = defineProps({
    config: {
        type: Object,
        default: () => ({})
    }
})
echarts.use([TooltipComponent, PieChart, CanvasRenderer, LabelLayout]);

onMounted(() => {
    const option = {
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
                type: 'pie',
                radius: '56%',
                // label: {
                //     show: false,
                // },
                data: props.config.data
            }
        ]
    };
    var chartDom: any = document.getElementById(`${props.config.ele}`);
    var myChart = echarts.init(chartDom);
    option && myChart.setOption(option);
})

</script>
